import UserLayout from "./index";
import { List } from "antd";
import Link from "next/link";
import axios from "../../utils/axios";

function UseList(...params) {
  let props = params[0];
  console.log("4.UseList.render", params);
  return (
    <UserLayout>
      <List
        header={<div>用户列表</div>}
        footer={<div>共计多少{props?.list?.length}个用户</div>}
        bordered
        dataSource={props.list}
        renderItem={(item: any) => (
          <List.Item key={item._id}>
            <Link
              as={`/user/detail/${item._id}`}
              href={{ pathname: `/user/detail`, query: { id: item._id } }}
            >
              <a>{item.username}</a>
            </Link>
          </List.Item>
        )}
      />
    </UserLayout>
  );
}
// 获取此组件的初始化对象  此函数的返回值将成为此组件的属性对象
UseList.getInitialProps = async (ctx) => {
  console.log("2.UseList.getInitialProps ctx", ctx);
  //   let list = [
  //     { _id: 1, username: "zhangsan", password: "1" },
  //     { _id: 2, username: "lisi", password: "2" },
  //   ];
  let response = await axios({ url: "/api/users", method: "GET" });
  return { list: response.data.data };
  //   return { list };
};

export default UseList;
